<template>
  <el-drawer
    v-model="visible"
    :title="`生产详情`"
    direction="rtl"
    :before-close="handleClose"
  >
    <div class="common-group-details-item">
      <div style="font-size: 26px; font-weight: bold">
        No.{{ record.group_id
        }}<span style="color: #529b2e"
          >【{{ ddo.text("groupStatus", record.pd_id) }}】</span
        >
      </div>
    </div>
    <div class="common-group-details-item">
      <label>计划号：</label><span>{{ record.plan_id }}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品类型：</label
      ><span>{{ ddo.text("prodTypes", record.plan_type) }}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品客户：</label><span>{{ record.cus_name }}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品规格：</label><span>{{ record.std_name }}</span>
    </div>
    <div class="common-group-details-item">
      <label>产品花色：</label><span>{{ record.color_name }}</span>
    </div>
    <template v-for="pn in processNodeList" :key="pn.pn_id">
      <div
        class="common-group-details-item"
        style="border-bottom: none; padding-bottom: 8px;padding-top:8px;"
      >
        <label>{{ pdId2NumNameMap[pn.pd_id].label }}：</label
        ><span>{{ record[pdId2NumNameMap[pn.pd_id].prop] }}米</span>
      </div>
      <div
        class="common-group-details-item"
        style="border-bottom: none; padding: 8px 15px 8px 30px; font-size: 14px"
      >
        <label>操作时间：</label><span>{{ pn.pn_date }}</span>
      </div>
      <div
        class="common-group-details-item"
        style="padding: 8px 15px 8px 30px; font-size: 14px"
        :style="{borderBottom:pn.pd_id == 1060 || pn.pd_id == 1070?'none':''}"
      >
        <label>操作人：</label><span>{{ pn.pn_per }}</span>
      </div>

      <template v-if="pn.pd_id == 1060 || pn.pd_id == 1070">
        <div
          v-for="(prod,idx) in productList"
          :style="{borderBottom:idx==productList.length-1?'':'none'}"
          :key="prod.product_id"
          class="common-group-details-item"
          style="padding: 8px 15px 8px 30px; font-size: 14px"
        >
          <label>{{
            { "01": "一等品", "02": "二等品", "03": "三等品", "04": "等外品" }[
              prod.product_level
            ]
          }}：</label
          ><span>{{ prod.product_num }}米</span>
        </div>
      </template>


    </template>
  </el-drawer>
</template>

<script setup >
import { reactive, ref, computed } from "vue";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";

//流程状态与数量字段的对应关系
const pdId2NumNameMap = {
  1010: { prop: "group_num", label: "投坯产量" },
  1020: { prop: "pretreat_num", label: "前处理产量" },
  1030: { prop: "dye_num", label: "染色产量" },
  1040: { prop: "print_num", label: "印花产量" },
  1050: { prop: "arrange_num", label: "整理产量" },
  1060: { prop: "check_num", label: "质检产量" },
  1070: { prop: "check_num", label: "质检产量" },
};

const productList = ref([]);
const getProductList = (group_id) => {
  get("/process/product-list/" + group_id).then((result) => {
    productList.value = result.data;
  });
};

const processNodeList = ref([]);

const getProcessNodesByGroupId = (group_id) => {
  get("/process/nodes/" + group_id + "/1").then((result) => {
    processNodeList.value = result.data || [];
    const pn = processNodeList.value.find(
      (item) => item.pd_id == 1060 || item.pd_id == 1070
    );
    pn && getProductList(pn.group_id);
  });
};

const visible = ref(false);
const open = (item) => {
  getProcessNodesByGroupId(item.group_id);
  record.value = item;
  visible.value = true;
};
const handleClose = (done) => {
  done();
};

const record = ref({});

defineExpose({ open });
</script>

<style scoped>
.common-group-details-item {
  padding: 15px 15px;
  border-bottom: 1px dashed #dddddd;
  margin: 0px 10px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  color: #606266;
}
.common-group-details-item > lable {
  width: 200px;
}
</style>